<template>
  <div class="lg_wrap">
    <div class="lg_tab">
      <!--<span>登录</span><span>注册</span>-->
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">{{$t('m.signIn')}}</mt-tab-item>
        <mt-tab-item  id="2">{{$t('m.signUp')}}</mt-tab-item>
      </mt-navbar>
    </div>

    <div class="lg_outer">
    <!-- tab-container -->
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="lg_con">
            <mt-field v-model="phone" :placeholder="$t('m.tel')" type="tel"></mt-field>
            <mt-field v-model="password" :placeholder="$t('m.password')" type="password"></mt-field>
          </div>
          <p class="lg_forget"><router-link to="/findPass">{{$t('m.forgetPass')}}</router-link></p>
          <mt-button @click="login" type="default" size="large">{{$t('m.signIn')}}</mt-button>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="lg_con">
            <mt-field :placeholder="$t('m.tel')" v-model="rTel"  type="tel"></mt-field>
            <mt-field v-model="rCode" :placeholder="$t('m.messageCode')" >
              <span v-if="isCanGetCode" @click="getCode" style="color: #FC6180">{{$t('m.getCode')}}</span>
              <span v-else  style="color: #FC6180">{{codeTime}}S</span>
            </mt-field>
            <mt-field v-model="rPass" :placeholder="$t('m.setPassword')" type="password"></mt-field>
            <mt-field v-model="rePass" :placeholder="$t('m.confirmPassword')" type="password"></mt-field>
          </div>
          <mt-checklist
            v-model="agreeValue"
            :options="options">
          </mt-checklist>
          <mt-button @click="register" type="default" size="large">{{$t('m.signUp')}}</mt-button>
        </mt-tab-container-item>

      </mt-tab-container>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { MessageBox } from 'mint-ui';
  export default {
    name:'logregist',
    data() {
      return {
        /*登陆*/
        phone:'',
        password:'',
        /*注册*/
        rTel:'',
        rCode:'',
        rPass:'',
        rePass:'',
        isCanGetCode:true,
        codeTime:60,
        selected: '1',
        agreeValue:[],
        options : [{
          label: '已经阅读并同意《临听使用协议和隐私政策》',
          value: 'A'
        }],
        codeInterval:null
      };
    },
    watch:{
      agreeValue(val){
        console.log(val.length)
      }
    },
    methods:{
      /*登陆*/
      login(){
        let that = this;
        let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!this.phone){
          MessageBox('提示', '请填写手机号');
        }else if(!regPhone.test(this.phone)){
          MessageBox('提示', '手机号格式错误');
        }else if(!this.password){
          MessageBox('提示', '请输入密码');
        }else {
          this.$axios({
            method:'POST',
            url: that.$store.state.apiUrl+'login/toLogin',
            params:{
              'phone':that.phone,
              'login_password':that.password
            },
            data:{
              'phone':that.phone,
              'login_password':that.password
            },
          }).then(function (res) {
            console.log(res)
            if(res.data.status){
              that.$router.push('/index');
              console.log(res.data.data.id)
              that.$store.state.isLogin = 1;
              sessionStorage.setItem('isLogin',1);
              sessionStorage.setItem('userId',res.data.data.id);
              sessionStorage.setItem('phone',res.data.data.phone);
              that.$store.state.userId = res.data.data.id;
              that.$store.state.isLogin = sessionStorage.getItem('isLogin');
            }else {
              MessageBox('提示', '登录失败，'+res.data.message);
            }
          }).catch(function () {
            MessageBox('提示', '登录失败');
          })
        }
      },
      /*获取验证码*/
      getCode(){
        let that = this;
        let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!this.rTel){
          MessageBox('提示', '请填写手机号');
        }else if(!regPhone.test(this.rTel)){
          MessageBox('提示', '手机号格式错误');
        }else {
          this.$axios({
            method:'GET',
            url: that.$store.state.apiUrl+'login/sendValidCode',
            params:{'phone':this.rTel},
          }).then(function (res) {
            if(res.data.status){
              that.changeCodeTime();
              MessageBox('提示', '验证码发送成功 ');
            }else {
              MessageBox('提示', '验证码获取失败');
            }
            console.log(res)
          }).catch(function () {
            MessageBox('提示', '验证码获取失败');
          })
        }
      },
      /*倒计时*/
      changeCodeTime(){
        let that = this
        this.isCanGetCode = false;
        this.codeInterval = setInterval(function () {
          if(that.codeTime>0){
            that.codeTime--;
          }else {
            that.isCanGetCode = true;
            that.codeTime = 60;
            clearInterval(that.codeInterval)
          }
        },1000)
      },
      /*注册*/
      register(){
        let that = this;
        let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!this.rTel){
          MessageBox('提示', '请填写手机号');
        }else if(!regPhone.test(this.rTel)){
          MessageBox('提示', '手机号格式错误');
        }else if(!this.rCode){
          MessageBox('提示', '请先获取验证码');
        }else if(!this.rPass){
          MessageBox('提示', '请设置密码');
        } else if(this.rPass.length<6 || this.rPass.length>12){
          MessageBox('提示', '密码长度需在6-12位之间');
        }else if(this.rePass!==this.rPass){
          MessageBox('提示', '两次填写的密码不相同,请重新输入');
          this.rePass = '';
        }else if(!this.agreeValue.length){
          MessageBox('提示', '请阅读并同意协议和隐私政策');
        }else {
          this.$axios({
            method:'POST',
            url: that.$store.state.apiUrl+'login/registUser',
            params:{
              'phone':that.rTel,
              'login_password':that.rPass,
              'valideCode':that.rCode
            }
          }).then(function (res) {
            if(res.data.status){
              MessageBox('提示', '注册成功');
              that.$store.state.isLogin = true;
            }else {
              MessageBox('提示', '注册失败,'+res.data.message);
            }
            console.log(res)
          }).catch(function () {
            MessageBox('提示', '注册失败，请重试');
          })
        }

      },
    },
    mounted(){
      this.$store.state.showTab = false;
      if(sessionStorage.getItem('lang')==='en_us'){
        this.options[0].label='Have read and agreed to listen to the use agreement and privacy policy'
      };
      if(sessionStorage.getItem('isLogin')==1 && sessionStorage.getItem('phone') && sessionStorage.getItem('userId')){
        this.$router.push('/index')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  border-1px()
    content ''
    position absolute
    width 100%
    height 1px
    left 0
    bottom 0
    border-top 1px solid #f9f9f9
    -webkit-transform-origin 0 100%
    transform-origin 0 100%
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
  .lg_tab
    height 1.6rem
    background url(./log_bg.png) center top no-repeat
    background-size cover
    position relative
    .mint-navbar
      background none
      position absolute
      left 0
      bottom 0
      width 100%
      .mint-tab-item
        color #fff
        font-size 0.14rem
        position relative
        padding 0
        margin 0
        height 0.44rem
        position relative
        &:last-child::before
          content ''
          position absolute
          width 1px
          height 60%
          top 20%
          left 0
          background #fff
        .mint-tab-item-label
          line-height 0.44rem
      .mint-tab-item.is-selected
        border 0
        color #fff
      .mint-tab-item.is-selected::after
        content ''
        position absolute
        width 0
        height 0
        border-style solid
        border-width 10px
        border-color transparent transparent #fff transparent
        bottom 0
        left 50%
        margin-left -10px
  .lg_outer .mint-tab-container
    padding 0.5rem 0.32rem 0.1rem
    .mint-button
      background #FFBF44
      color #fff
    .mint-checklist .mint-cell-wrapper
      padding 0
      background none
    .mint-checklist-label
      padding 0
      font-size 0.13rem
      color #ccc
    .mint-checkbox-input:checked + .mint-checkbox-core
      background-color #FFBF44
      border-color #FFBF44
  .lg_con
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    border-radius 4px
    .mint-cell
      position relative
      &::after
        border-1px()
      &:last-child::after
        content none
    .mint-cell-wrapper
      font-size 0.14rem
      background none
  .lg_forget
    text-align right
    margin 0.14rem 0 0.28rem
    font-size 0.13rem
    a
      color #FFBF44
      font-size 0.13rem
</style>
